<template>
  <div class="tree-ctrl-body" >
    <div class="tree-table-ctrl">
     <!-- <div class="search-ctrl f-l" >
        <input type="text" class="search-text" placeholder="部门搜索">
        <button type="button" class="search-btn btn btn-info" >搜索</button>
      </div>-->
      <div id="tree-dep"  class="ztree"></div>
    </div>
    <div class="tree-table-ctrl">
      <!-- {{TreeNodes}} -->
      <SectionTreeTable
        :treeTableRow="treeTableRow"
        :searchObj="searchObj"
        @tableSearch="tableSearch"
        @pageChange="tableRowChange"
        @newTreeTableRow="newTreeTableRowFn"
        @newSectionTable="newSectionTableFn"
        @policeDeleteCallBack="policeDeleteCallBackFn"
        @newPoliceSucceedFnOrigin="newPoliceSucceedFnOriginFn"
        @searchParamsParent="searchParamsParentFn"
      ></SectionTreeTable>

    </div>
  </div>
</template>

<script>
   import SectionTreeTable from "./SectionTreeTable.vue"
  export default {
    name: "SectionTree",
    data(){
      return{
        setting : {
          data: {
            simpleData: {
              enable: true
            },
          },
        },
        treeTableRow:{},
        stationObj:{
          pageSize:20,
          ifUse:"-1",
          orgCode:"",
          stationNum:"",
          stationName:"",
        },
        scrollTop:0,
        stationCommunication:{},
        sectionParams:{},
        searchObj:{
          condition:[
            {"title":"部门名称","key":"stationName",'type':'text',"value":''},
            {"title":"是否使用","key":"ifUse",'type':'select',"value":'-1','data':[
                {"key":"请选择状态","value":"-1"},
                {"key":"是","value":"1"},
                {"key":"否","value":"0"},
              ]
            },
            {"title":"组织代码","key":"orgCode",'type':'text',"value":''},
            {"title":"部门类型","key":"stationNum",'type':'select',"value":'','data':[
                {"key":"请选择状态","value":""},
                {"key":"市局-SJ","value":"SJ"},
                {"key":"分局-FJ","value":"FJ"},
                {"key":"直属机构-ZSJG","value":"ZSJG"},
                {"key":"交管-JG","value":"JG"},
                {"key":"派出所-PCS","value":"PCS"},
                {"key":"检查站-JCZ","value":"JCZ"},
                {"key":"警务站-JWZ","value":"JWZ"},
              ]
            },
          ],
          htmlType:"searchDefaultPublic",
        },
      }
    },
    components:{
      SectionTreeTable
    },
    mounted(){
      //添加回调
      ////console.log(this.$store.getters.getTreeUrl.treeUrl)
      const _this = this;
      this.setting.callback = {
        onClick:function(event,treeId,treeNode){
          //console.log(treeNode);

          _this.stationCommunication.id = treeNode.id;
          _this.stationCommunication.name = treeNode.name;
          sessionStorage.setItem("stationCommunication",JSON.stringify(_this.stationCommunication));
          //部门信息缓存
          //console.log(JSON.parse(sessionStorage.getItem("stationCommunication")));
          //树结构表格加载
          _this.stationObj.stationId = treeNode.id;
          //表格列表
          _this.treeTableAjax(_this.HOST+'/station/getChildPoliceStationInfo','get',_this.stationObj);
        }
      };
      //树结构加载
      this.treeAjax(this.HOST+'/station/getOrgaInfo','get',true);

    },
    methods:{
      //树结构加载
      treeAjax(url,type,selectTree){
        this.scrollTop = document.getElementById('tree-dep').scrollTop;
        let _this = this;
        this.$axios[type](url)
          .then((data)=>{
            let _this = this;
            $.fn.zTree.init($("#tree-dep"), this.setting, data.data.data);
            if( selectTree ){
              $(function(){
                $("#tree-dep > li").eq(0).children("a").click();
              });
            }
            $(function(){
              let treeObj = $.fn.zTree.getZTreeObj("tree-dep");
              let nodes = treeObj.getNodes();
              if (nodes.length>0) {
                treeObj.expandNode(nodes[0], true, false , false);
              }
             setTimeout(function(){
               $("#tree-dep").scrollTop(_this.scrollTop);
             },500)
            })

          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //删除刷新
      newTreeTableRowFn(index){
        this.treeTableRow.data.splice(index,1);
      },
      //树结构表格加载
      treeTableAjax(url,type,params){
        this.$axios[type](url,{
          params:params
        })
          .then((tableData)=>{
            //console.log(tableData.data);
            this.treeTableRow = tableData.data;
          })
          .catch((err)=>{
            //console.log(err);
          })
      },

      //分页
      tableRowChange(page){
        this.stationObj.pageNum = page;
        //console.log(this.stationObj);
        //表格列表重新渲染
        this.treeTableAjax(this.HOST+"/station/getChildPoliceStationInfo","get",this.stationObj);
      },

      //表格搜索
      tableSearch(tableSearchText){
        this.stationObj.policeName = tableSearchText;
        this.treeTableAjax(this.HOST+"/station/getChildPoliceStationInfo","get",this.stationObj);
      },

      //刷新表
      newSectionTableFn(){
        //this.treeTableRow = [];
        //console.log(this.stationObj);
        this.treeAjax(this.HOST+'/station/getOrgaInfo','get',false);
        this.treeTableAjax(this.HOST+'/station/getChildPoliceStationInfo','get',this.stationObj);
      },

      //新增部门
      newPoliceSucceedFnOriginFn(){

        //树结构加载
        this.treeAjax(this.HOST+'/station/getOrgaInfo','get',false);
        this.treeTableAjax(this.HOST+'/station/getChildPoliceStationInfo','get',this.stationObj);
      },

      //删除回调
      policeDeleteCallBackFn(index){
        //this.treeTableRow.data.splice(index,1);
        //树结构加载
        //this.treeAjax(this.HOST+'/station/getOrgaInfo','get',this.sectionParams);
        ////console.log(this.stationObj);
        this.treeAjax(this.HOST+'/station/getOrgaInfo','get',false);
        this.treeTableAjax(this.HOST+'/station/getChildPoliceStationInfo','get',this.stationObj);
      },

      //搜索回调
      searchParamsParentFn(){
        //console.log(this.searchObj.condition);
        for( let i=0;i<this.searchObj.condition.length;i++ ){
          for( let paramsKey in this.stationObj ){
            if( this.searchObj.condition[i].key === paramsKey ){
             if( this.searchObj.condition[i].key === 'ifUse' && this.searchObj.condition[i].value === "" ){
                //console.log(this.searchObj.condition[i].key);
                this.stationObj[paramsKey] = "-1";
                this.searchObj.condition[1].value = "-1";
              }else{
               this.stationObj[paramsKey] = this.searchObj.condition[i].value
             }
            }
          }
        }
        this.treeTableAjax(this.HOST+'/station/getChildPoliceStationInfo','get',this.stationObj);
      }
    }
  }
</script>

<style scoped>

</style>
